import { useTranslete } from "providers/hooks/useTranslete";
import { settingsReducer } from "providers/store";

import { useNotification } from "features/useShowNotification";
import { useShowPayment } from "features/useShowPayment";
import { useShowProfile } from "features/useShowProfile";

import { MenuIcon } from "shared/icons";
import { IconButton } from "shared/ui/iconButton";

import * as Styled from "./index.styled";

export const Header = () => {
	const { t } = useTranslete();

	const isShowSideBar = settingsReducer((state) => state.isShowSidebar);

	const { Payment } = useShowPayment();
	const { Notification } = useNotification();
	const { Avatar } = useShowProfile();

	const handleShowSideBar = () => {
		settingsReducer.setState({
			isShowSidebar: !isShowSideBar,
		});
	};

	return (
		<Styled.HeaderWrapper>
			<Styled.HeaderBlock position="left">
				<IconButton onClick={() => handleShowSideBar()}>
					<MenuIcon />
				</IconButton>
				<Styled.HeaderLogo>{t("header.title")}</Styled.HeaderLogo>
			</Styled.HeaderBlock>
			<Styled.HeaderBlock position="right">
				{Payment}
				{Notification}
				{Avatar}
			</Styled.HeaderBlock>
		</Styled.HeaderWrapper>
	);
};
